<script setup lang="ts">
import ItemHeard from "@/view/heard/ItemHeard.vue";
import * as THREE from 'three'
import {onMounted, onBeforeUnmount, ref} from 'vue'
import WAVES from 'vanta/src/vanta.waves.js'
import ItemAside from "@/view/aside/ItemAside.vue";

const vanJs = ref('vanJs')

let VanEffect: any = null;

//在两个生命周期钩子内创建vantaEffect
onMounted(() => {
  VanEffect = WAVES({
    el: vanJs.value,
    THREE: THREE,
    //如果需要改变样式，要写在这里
    //因为这里vantaEffect是没有setOptions这个方法的
    color: 0x42133,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.00,
    minWidth: 200.00,
    scale: 1.00,
    scaleMobile: 1.00,
    shininess: 30.00,
    waveHeight: 38.50,
    waveSpeed: 1.30,
    zoom: 0.93
  })
})

onBeforeUnmount(() => {
  if (VanEffect) {
    VanEffect.destroy()
  }
})
</script>

<template>
  <div class="itemHome">
    <div id="vanJs" ref="vanJs"/>

    <el-container >
      <el-aside width="20vw">
        <item-aside />
      </el-aside>
      <el-container class="ItemContainer">
        <el-header>
          <item-heard/>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
        <el-footer></el-footer>
      </el-container>
    </el-container>
  </div>

</template>

<style scoped lang="scss">
#vanJs {
  position: absolute;
  height: 100vh;
  width: 100vw;
  opacity: 0.1;
  z-index: -1;
}
</style>